{% extends 'admin/public/base.html' %}

{% block con-header %}
<div class="container-fluid am-cf">
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
            <div class="page-header-heading">
                <span class="am-icon-user page-header-heading-icon"></span> 
                会员修改 </div>
        </div>
</div>
</div>
{% endblock %}

{% block con-body %}
<div class="row-content am-cf">
    
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <div class="widget-body am-fr">
                    
                    <form action="{% url 'admin_user_update' %}" method="post" enctype="multipart/form-data" class="am-form tpl-form-line-form">
                        <div class="am-form-group">
                            <label for="user-name" class="am-u-sm-3 am-form-label">
                                用户名
                            </label>
                            <div class="am-u-sm-9">
                                <input type="text" name="username" value="{{ uinfo.username }}" class="tpl-form-input" id="user-name" 
                                placeholder="请填写用户名">
                            </div>
                        </div>

                        

                        <div class="am-form-group">
                            <label for="user-name" class="am-u-sm-3 am-form-label">
                                邮箱
                            </label>
                            <div class="am-u-sm-9">
                                <input type="email" name="email" value="{{ uinfo.email }}" class="tpl-form-input" id="user-name" 
                                placeholder="请填写邮箱">
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label for="user-name" class="am-u-sm-3 am-form-label">
                                手机号
                            </label>
                            <div class="am-u-sm-9">
                                <input type="text" name="phone" value="{{ uinfo.phone }}" class="tpl-form-input" id="user-name" 
                                placeholder="请填写手机号">
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label for="user-name" class="am-u-sm-3 am-form-label">
                                年龄
                            </label>
                            <div class="am-u-sm-9">
                                <input type="text" name="age" value="{{ uinfo.age }}" class="tpl-form-input" id="user-name" 
                                placeholder="请填写年龄">
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label for="user-name" class="am-u-sm-3 am-form-label">
                                性别
                            </label>
                            <div class="am-u-sm-9">
                                <div class="am-form-group">
                                    {% if uinfo.sex == '男' %}
                                    <label class="am-radio-inline">
                                        <input type="radio" name="sex" value="男" checked> 男
                                    </label>
                                    <label class="am-radio-inline">
                                        <input type="radio" name="sex" value="女"> 女
                                    </label>
                                    {% else %}
                                    <label class="am-radio-inline">
                                        <input type="radio" name="sex" value="男" > 男
                                    </label>
                                    <label class="am-radio-inline">
                                        <input type="radio" name="sex" value="女" checked> 女
                                    </label>
                                    {% endif %}

                                </div>
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label for="user-weibo" class="am-u-sm-3 am-form-label">
                                头像上传
                            </label>
                            <div class="am-u-sm-9">
                                <div class="am-form-group am-form-file">
                                    <div class="tpl-form-file-img">
                                        <img id="filepicurl" src="{{ uinfo.picurl }}" alt="" width="150px;">
                                    </div>
                                    <input type="hidden" name="picurl" value="">
                                    <button type="button" class="am-btn am-btn-danger am-btn-sm">
                                        <i class="am-icon-cloud-upload"></i> 选择头像上传</button>
                                    <input id="doc-form-file" type="file" name="pic" multiple="">
                                </div>

                            </div>
                        </div>

                        <script type="text/javascript">
                            // ajax的文件上传

                            $('#doc-form-file').change(function(){
                                // 创建一个表单对象
                                var form = new FormData()
                                // 获取当前选择的文件
                                file = this.files[0]
                                // 把当前的文件添加到 表单对象中
                                form.append('pic',file)
                                form.append('csrfmiddlewaretoken','{{ csrf_token }}')


                                // 发送ajax
                                $.ajax({
                                    // 请求地址
                                    url : '{% url "admin_ajax_upload" %}',
                                    type : 'POST',
                                    data : form,
                                    processData:false,//设置ajax不处理发的数据
                                    contentType:false,//不去设置context-Type请求头
                                    async:true,//异步请求
                                    success:function(data){
                                        // 判断文件是否上传成功
                                        if(data['code'] == 0){
                                            // 把上传的图片动态加载到页面中
                                            $('#filepicurl').attr('src',data['url'])

                                            // 把上传的图片路径,添加到表单中
                                            $('input[name=picurl]').val(data['url'])
                                            
                                        }else{
                                            alert(data['msg'])
                                        }
                                    }
                                },'json')

                            })


                        </script>


                        <input type="hidden" name="id" value="{{ uinfo.id }}">
                        {% csrf_token %}
                        <div class="am-form-group">
                            <div class="am-u-sm-9 am-u-sm-push-3">
                            <button class="am-btn am-btn-primary tpl-btn-bg-color-success ">提交</button></div>
                        </div>

                    </form>

                </div>
            </div>
        </div>
    </div>

</div>
{% endblock %}